<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>宝贝盒子 - 精美SVG导航图标库</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'HarmonyOS Sans', '微软雅黑', sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #f9f7fe 0%, #e0e7ff 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      transition: background 0.5s ease;
      color: #334155;
    }
    
    body.dark {
      background: linear-gradient(135deg, #1c1c2e 0%, #23243a 100%);
      color: #e2e8f0;
    }
    
    .header {
      text-align: center;
      margin: 20px 0 40px;
      max-width: 800px;
    }
    
    .logo-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 15px;
    }
    
    .logo-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
    }
    
    .logo-icon i {
      font-size: 36px;
      color: white;
    }
    
    .logo-text {
      font-size: 42px;
      font-weight: 800;
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 1px;
    }
    
    .dark .logo-text {
      background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);
      -webkit-background-clip: text;
    }
    
    .subtitle {
      font-size: 20px;
      margin: 10px 0 20px;
      color: #64748b;
    }
    
    .dark .subtitle {
      color: #94a3b8;
    }
    
    .controls {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin: 20px 0;
      flex-wrap: wrap;
    }
    
    .btn {
      background: white;
      border: none;
      border-radius: 50px;
      padding: 12px 25px;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    
    .dark .btn {
      background: #23243a;
      color: #e2e8f0;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }
    
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 7px 18px rgba(0, 0, 0, 0.15);
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      color: white;
    }
    
    .dark .btn-primary {
      background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);
    }
    
    .nav-bar {
      width: 100%;
      max-width: 600px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0 -2px 25px rgba(120, 120, 180, 0.2);
      border-radius: 28px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 15px 0;
      margin-bottom: 40px;
      backdrop-filter: blur(5px);
      border: 2px solid rgba(255, 255, 255, 0.5);
    }
    
    .dark .nav-bar {
      background: rgba(35, 36, 58, 0.9);
      box-shadow: 0 -2px 25px rgba(0, 0, 0, 0.4);
      border: 2px solid rgba(35, 36, 58, 0.5);
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      padding: 10px 0;
      transition: all 0.3s ease;
      color: #64748b;
      user-select: none;
      position: relative;
      border-radius: 18px;
    }
    
    .nav-item.selected {
      color: #4f46e5;
      background: rgba(199, 210, 254, 0.3);
    }
    
    .dark .nav-item {
      color: #94a3b8;
    }
    
    .dark .nav-item.selected {
      color: #fbbf24;
      background: rgba(123, 92, 56, 0.3);
    }
    
    .nav-icon {
      width: 46px;
      height: 46px;
      margin-bottom: 6px;
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                 filter 0.4s ease;
      filter: drop-shadow(0 3px 8px rgba(120, 120, 180, 0.3));
    }
    
    .dark .nav-icon {
      filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
    }
    
    .nav-item.selected .nav-icon {
      transform: scale(1.25) translateY(-8px);
      filter: drop-shadow(0 6px 15px rgba(129, 140, 248, 0.5));
    }
    
    .dark .nav-item.selected .nav-icon {
      filter: drop-shadow(0 6px 15px rgba(251, 191, 36, 0.5));
    }
    
    .nav-label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
    }
    
    .nav-item.selected .nav-label {
      transform: translateY(6px);
      color: #4f46e5;
      font-weight: 800;
      letter-spacing: 0.8px;
    }
    
    .dark .nav-item.selected .nav-label {
      color: #fbbf24;
    }
    
    .indicator {
      position: absolute;
      top: 5px;
      right: 25%;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    }
    
    /* 图标库部分 */
    .icon-library {
      width: 100%;
      max-width: 1000px;
      margin: 30px 0 50px;
    }
    
    .library-title {
      text-align: center;
      margin-bottom: 30px;
      font-size: 28px;
      position: relative;
      display: inline-block;
      left: 50%;
      transform: translateX(-50%);
      padding: 0 20px;
    }
    
    .library-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #4f46e5, #7c3aed);
      border-radius: 2px;
    }
    
    .dark .library-title::after {
      background: linear-gradient(90deg, #818cf8, #c4b5fd);
    }
    
    .theme-tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 25px;
    }
    
    .theme-tab {
      padding: 10px 25px;
      background: white;
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 50px;
      margin: 0 5px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .dark .theme-tab {
      background: #23243a;
      color: #e2e8f0;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
    
    .theme-tab.active {
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
    }
    
    .dark .theme-tab.active {
      background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);
    }
    
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 25px;
      margin-top: 20px;
    }
    
    .icon-card {
      background: white;
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      text-align: center;
      transition: transform 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .dark .icon-card {
      background: #1e2030;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    
    .icon-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }
    
    .card-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .card-title {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 15px;
      color: #4f46e5;
    }
    
    .dark .card-title {
      color: #fbbf24;
    }
    
    .download-btn {
      background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      color: white;
      border: none;
      border-radius: 50px;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .dark .download-btn {
      background: linear-gradient(135deg, #818cf8 0%, #c4b5fd 100%);
    }
    
    .download-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
    }
    
    .footer {
      margin-top: 40px;
      padding: 20px;
      text-align: center;
      color: #64748b;
      font-size: 14px;
      max-width: 800px;
    }
    
    .dark .footer {
      color: #94a3b8;
    }
    
    .hint {
      margin-top: 15px;
      font-style: italic;
      font-size: 14px;
      color: #64748b;
    }
    
    .dark .hint {
      color: #94a3b8;
    }
    
    @media (max-width: 768px) {
      .logo-text {
        font-size: 32px;
      }
      
      .subtitle {
        font-size: 16px;
      }
      
      .logo-icon {
        width: 50px;
        height: 50px;
      }
      
      .logo-icon i {
        font-size: 28px;
      }
      
      .nav-bar {
        max-width: 100%;
      }
      
      .icon-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
      }
      
      .icon-card {
        padding: 15px;
      }
      
      .card-icon {
        width: 60px;
        height: 60px;
      }
    }
  </style>
</head>
<body>
    <div class="header">
    <div class="logo-container">
      <div class="logo-icon">
        <i class="fas fa-box-open"></i>
      </div>
      <div class="logo-text">宝贝盒子</div>
    </div>
    <p class="subtitle">创意玩具箱APP专属SVG图标库 - 精美可下载</p>
    
    <div class="controls">
      <button class="btn btn-primary" onclick="toggleTheme()">
        <i class="fas fa-moon"></i> 切换暗色模式
      </button>
      <button class="btn" onclick="downloadAllIcons()">
        <i class="fas fa-download"></i> 下载全部图标
      </button>
        </div>
      </div>
      
  <div class="nav-bar" id="navBar">
    <div class="nav-item selected" data-key="home">
      <span class="nav-icon" id="icon-home"></span>
      <span class="nav-label">首页</span>
        </div>
    <div class="nav-item" data-key="hot">
      <span class="nav-icon" id="icon-hot"></span>
      <span class="nav-label">热门</span>
      </div>
    <div class="nav-item" data-key="history">
      <span class="nav-icon" id="icon-history"></span>
      <span class="nav-label">历史</span>
        </div>
    <div class="nav-item" data-key="msg">
      <span class="nav-icon" id="icon-msg"></span>
      <span class="nav-label">消息</span>
      <div class="indicator"></div>
      </div>
    <div class="nav-item" data-key="mine">
      <span class="nav-icon" id="icon-mine"></span>
      <span class="nav-label">我的</span>
        </div>
      </div>
      
  <div class="icon-library">
    <h2 class="library-title">SVG图标库</h2>
    
    <div class="theme-tabs">
      <button class="theme-tab active" data-theme="light">亮色主题</button>
      <button class="theme-tab" data-theme="dark">暗色主题</button>
      </div>
      
    <div class="icon-grid">
      <div class="icon-card">
        <div class="card-icon" id="preview-home">
          <svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <rect x="8" y="20" width="32" height="20" rx="6" fill="#c7d2fe" stroke="#4f46e5" stroke-width="3"/>
            <path d="M6 24L24 8L42 24" stroke="#4f46e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <rect x="19" y="28" width="10" height="10" rx="3" fill="#fbbf24"/>
            <rect x="28" y="12" width="6" height="6" rx="3" fill="#4f46e5"/>
          </svg>
        </div>
        <h3 class="card-title">首页</h3>
        <button class="download-btn" onclick="downloadIcon('home', currentTheme)">
          <i class="fas fa-download"></i> 下载SVG
        </button>
        <p class="hint">尺寸: 48×48</p>
      </div>
      
      <div class="icon-card">
        <div class="card-icon" id="preview-hot">
          <svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 8C28 18 38 18 38 30C38 37 32 44 24 44C16 44 10 37 10 30C10 18 20 18 24 8Z" fill="#fbcfe8" stroke="#ec4899" stroke-width="3"/>
            <circle cx="24" cy="28" r="7" fill="#fbbf24"/>
            <path d="M24 16L29 22M24 16L19 22" stroke="#ec4899" stroke-width="3" stroke-linecap="round"/>
            <circle cx="24" cy="28" r="2" fill="#ec4899"/>
          </svg>
        </div>
        <h3 class="card-title">热门</h3>
        <button class="download-btn" onclick="downloadIcon('hot', currentTheme)">
          <i class="fas fa-download"></i> 下载SVG
        </button>
        <p class="hint">尺寸: 48×48</p>
      </div>
      
      <div class="icon-card">
        <div class="card-icon" id="preview-history">
          <svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <circle cx="24" cy="24" r="18" fill="#fef3c7" stroke="#f59e0b" stroke-width="3"/>
            <path d="M24 14V24L30 28" stroke="#f59e0b" stroke-width="3" stroke-linecap="round"/>
            <rect x="20" y="20" width="4" height="4" rx="1" fill="#f59e0b"/>
            <rect x="26" y="26" width="3" height="3" rx="1" fill="#f59e0b"/>
          </svg>
        </div>
        <h3 class="card-title">历史</h3>
        <button class="download-btn" onclick="downloadIcon('history', currentTheme)">
          <i class="fas fa-download"></i> 下载SVG
        </button>
        <p class="hint">尺寸: 48×48</p>
      </div>
      
      <div class="icon-card">
        <div class="card-icon" id="preview-msg">
          <svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <rect x="6" y="12" width="36" height="24" rx="8" fill="#bae6fd" stroke="#06b6d4" stroke-width="3"/>
            <path d="M6 16L24 30L42 16" stroke="#06b6d4" stroke-width="3" stroke-linecap="round"/>
            <circle cx="32" cy="20" r="3" fill="#06b6d4"/>
            <rect x="20" y="20" width="6" height="6" rx="3" fill="#06b6d4"/>
          </svg>
        </div>
        <h3 class="card-title">消息</h3>
        <button class="download-btn" onclick="downloadIcon('msg', currentTheme)">
          <i class="fas fa-download"></i> 下载SVG
        </button>
        <p class="hint">尺寸: 48×48</p>
      </div>
      
      <div class="icon-card">
        <div class="card-icon" id="preview-mine">
          <svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
            <circle cx="24" cy="16" r="9" fill="#a7f3d0" stroke="#10b981" stroke-width="3"/>
            <rect x="12" y="28" width="24" height="12" rx="6" fill="#d1fae5" stroke="#10b981" stroke-width="3"/>
            <circle cx="24" cy="14" r="3" fill="#10b981"/>
            <path d="M18 20H30" stroke="#10b981" stroke-width="3" stroke-linecap="round"/>
            <rect x="18" y="32" width="4" height="4" rx="2" fill="#10b981"/>
            <rect x="26" y="32" width="4" height="4" rx="2" fill="#10b981"/>
          </svg>
        </div>
        <h3 class="card-title">我的</h3>
        <button class="download-btn" onclick="downloadIcon('mine', currentTheme)">
          <i class="fas fa-download"></i> 下载SVG
        </button>
        <p class="hint">尺寸: 48×48</p>
      </div>
        </div>
      </div>
      
  <div class="footer">
    <p>© 2023 宝贝盒子APP - 创意玩具箱 | SVG图标库</p>
    <p class="hint">提示：点击导航图标可查看选中效果，双击页面空白处可快速切换主题</p>
      </div>
      
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  <script>
    // 创意SVG图标 - 结合宝贝盒子元素
    const icons = {
      light: {
        home: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<rect x="8" y="20" width="32" height="20" rx="6" fill="#c7d2fe" stroke="#4f46e5" stroke-width="3"/>\n<path d="M6 24L24 8L42 24" stroke="#4f46e5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n<rect x="19" y="28" width="10" height="10" rx="3" fill="#fbbf24"/>\n<rect x="28" y="12" width="6" height="6" rx="3" fill="#4f46e5"/>\n</svg>`,
        hot: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<path d="M24 8C28 18 38 18 38 30C38 37 32 44 24 44C16 44 10 37 10 30C10 18 20 18 24 8Z" fill="#fbcfe8" stroke="#ec4899" stroke-width="3"/>\n<circle cx="24" cy="28" r="7" fill="#fbbf24"/>\n<path d="M24 16L29 22M24 16L19 22" stroke="#ec4899" stroke-width="3" stroke-linecap="round"/>\n<circle cx="24" cy="28" r="2" fill="#ec4899"/>\n</svg>`,
        history: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<circle cx="24" cy="24" r="18" fill="#fef3c7" stroke="#f59e0b" stroke-width="3"/>\n<path d="M24 14V24L30 28" stroke="#f59e0b" stroke-width="3" stroke-linecap="round"/>\n<rect x="20" y="20" width="4" height="4" rx="1" fill="#f59e0b"/>\n<rect x="26" y="26" width="3" height="3" rx="1" fill="#f59e0b"/>\n</svg>`,
        msg: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<rect x="6" y="12" width="36" height="24" rx="8" fill="#bae6fd" stroke="#06b6d4" stroke-width="3"/>\n<path d="M6 16L24 30L42 16" stroke="#06b6d4" stroke-width="3" stroke-linecap="round"/>\n<circle cx="32" cy="20" r="3" fill="#06b6d4"/>\n<rect x="20" y="20" width="6" height="6" rx="3" fill="#06b6d4"/>\n</svg>`,
        mine: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<circle cx="24" cy="16" r="9" fill="#a7f3d0" stroke="#10b981" stroke-width="3"/>\n<rect x="12" y="28" width="24" height="12" rx="6" fill="#d1fae5" stroke="#10b981" stroke-width="3"/>
        <circle cx="24" cy="14" r="3" fill="#10b981"/>
        <path d="M18 20H30" stroke="#10b981" stroke-width="3" stroke-linecap="round"/>
        <rect x="18" y="32" width="4" height="4" rx="2" fill="#10b981"/>
        <rect x="26" y="32" width="4" height="4" rx="2" fill="#10b981"/>
      </svg>`
      },
      dark: {
        home: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<rect x="8" y="20" width="32" height="20" rx="6" fill="#23243a" stroke="#818cf8" stroke-width="3"/>\n<path d="M6 24L24 8L42 24" stroke="#818cf8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n<rect x="19" y="28" width="10" height="10" rx="3" fill="#fbbf24"/>\n<rect x="28" y="12" width="6" height="6" rx="3" fill="#818cf8"/>\n</svg>`,
        hot: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<path d="M24 8C28 18 38 18 38 30C38 37 32 44 24 44C16 44 10 37 10 30C10 18 20 18 24 8Z" fill="#a21caf" stroke="#f472b6" stroke-width="3"/>\n<circle cx="24" cy="28" r="7" fill="#fde68a"/>\n<path d="M24 16L29 22M24 16L19 22" stroke="#f472b6" stroke-width="3" stroke-linecap="round"/>\n<circle cx="24" cy="28" r="2" fill="#f472b6"/>\n</svg>`,
        history: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<circle cx="24" cy="24" r="18" fill="#23243a" stroke="#fde68a" stroke-width="3"/>\n<path d="M24 14V24L30 28" stroke="#fde68a" stroke-width="3" stroke-linecap="round"/>\n<rect x="20" y="20" width="4" height="4" rx="1" fill="#fde68a"/>\n<rect x="26" y="26" width="3" height="3" rx="1" fill="#fde68a"/>\n</svg>`,
        msg: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<rect x="6" y="12" width="36" height="24" rx="8" fill="#23243a" stroke="#38bdf8" stroke-width="3"/>\n<path d="M6 16L24 30L42 16" stroke="#38bdf8" stroke-width="3" stroke-linecap="round"/>\n<circle cx="32" cy="20" r="3" fill="#38bdf8"/>\n<rect x="20" y="20" width="6" height="6" rx="3" fill="#38bdf8"/>\n</svg>`,
        mine: `<svg viewBox="0 0 48 48" fill="none" width="48" height="48" xmlns="http://www.w3.org/2000/svg">\n<circle cx="24" cy="16" r="9" fill="#064e3b" stroke="#34d399" stroke-width="3"/>\n<rect x="12" y="28" width="24" height="12" rx="6" fill="#23243a" stroke="#34d399" stroke-width="3"/>\n<circle cx="24" cy="14" r="3" fill="#34d399"/>\n<path d="M18 20H30" stroke="#34d399" stroke-width="3" stroke-linecap="round"/>\n<rect x="18" y="32" width="4" height="4" rx="2" fill="#34d399"/>\n<rect x="26" y="32" width="4" height="4" rx="2" fill="#34d399"/>\n</svg>`
      }
    }
    const iconKeys = ['home','hot','history','msg','mine'];
    let currentTheme = 'light';

    // 渲染导航栏图标
    function renderNavBar() {
      iconKeys.forEach(key => {
        document.getElementById('icon-' + key).innerHTML = icons[currentTheme][key];
      });
    }
    // 渲染图标库
    function renderIconLibrary() {
      iconKeys.forEach(key => {
        document.getElementById('preview-' + key).innerHTML = icons[currentTheme][key];
      });
    }
    // 主题切换
    function setTheme(theme) {
      currentTheme = theme;
      document.body.classList.toggle('dark', theme === 'dark');
      document.querySelectorAll('.theme-tab').forEach(tab => {
        tab.classList.toggle('active', tab.dataset.theme === theme);
      });
      renderNavBar();
      renderIconLibrary();
    }
    // 绑定tab切换
    document.querySelectorAll('.theme-tab').forEach(tab => {
      tab.onclick = () => setTheme(tab.dataset.theme);
    });
    // 导航栏选中切换
    document.querySelectorAll('.nav-item').forEach(item => {
      item.onclick = function() {
        document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('selected'));
        this.classList.add('selected');
      };
    });
    // 单个图标下载
    window.downloadIcon = function(key, theme) {
      const svg = icons[theme][key];
      const blob = new Blob([svg], {type: 'image/svg+xml'});
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = `${key}-${theme}.svg`;
      document.body.appendChild(a);
      a.click();
      setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 100);
    };
    // 一键下载全部
    window.downloadAllIcons = function() {
      const zip = new JSZip();
      iconKeys.forEach(key => {
        zip.file(`${key}-${currentTheme}.svg`, icons[currentTheme][key]);
      });
      zip.generateAsync({type: 'blob'}).then(content => {
        const a = document.createElement('a');
        a.href = URL.createObjectURL(content);
        a.download = `baobeihezi-icons-${currentTheme}.zip`;
        document.body.appendChild(a);
        a.click();
        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(a.href); }, 100);
      });
    };
    // 亮/暗色双击切换
    window.toggleTheme = function() {
      setTheme(currentTheme === 'light' ? 'dark' : 'light');
    };
    // 初始化
    setTheme('light');
  </script>
</body>
</html>